<template>
  <div >
    <div class="title">
      <Header />
    </div>
    <div class="all-categories">
      <div
      v-for="item in list"
      :key="item.categories._id"
      class="categories"
    >
      <div class="titleText">
        {{ language==='zh-CN' ? item.categories.name['zh-CN']: item.categories.name['en-US'] }}
      </div>
      <div class="rectangle" style="position : relative; left : 0px;"></div>

      <div >
        <Foods :item="item" class="aaa"/>
      </div>
    </div>

    <div >
      <ShowCard />
    </div></div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import _ from 'lodash';

// import { get } from '@/common/utils';
//* 组件
import Foods from '@/views/menu/components/Foods.vue';
import ShowCard from '@/views/menu/components/ShowCar.vue';
import Header from '@/views/menu/components/Header.vue';

export default {
  data() {
    return {
    };
  },
  components: {
    Foods,
    ShowCard,
    Header,
  },
  computed: {
    ...mapState({
      categories: (state) => state.menu.categories,
      foods: (state) => state.menu.foods,
      foodsList: (state) => state.menu.foodsList,
      language: (state) => state.language.language,
      orderListState: (state) => state.menu.orderListState,
    }),
    // 重构数据结构
    list() {
      const list = [];
      let arr = [];
      _(this.categories).forEach((item) => {
        _(this.foods).forEach((i) => {
          if (_.get(item, '_id') === _.get(i.category, '_id')) {
            arr.push(i);
          }
        });
        list.push({
          categories: item,
          foodsItem: arr,
        });
        arr = [];
      });

      this.saveFoodsList({ list });
      return list;
    },

  },
  created() {
    this.hideUserUnflod();
    this.getMenuList(this.$route.params.id);
    //* 从local storage 中拿点餐信息放入vuex
    this.getOrderListState({ id: this.$route.params.id });
    // this.getNumber();
  },

  updated() {
    window.scroll(0, 0);
  },
  methods: {
    ...mapActions([
      'getMenuList',
      'getOrderListState',
      'saveFoodsList',
      'cleanOrderListState',
      'hideUserUnflod',
    ]),
  },
};
</script>

<style lang="scss" scoped>

@import '@/style/global.scss';
.container{
  width : 308px;
}
.all-categories{

  width : 800px;
  column-count : 2;
  column-width : 350px;

}
.title{
  margin-bottom : 30px;
}
.categories{
  break-inside : avoid;
  margin-bottom : 70px;
}

.rectangle{
  width : 40px;
  height : 8px;
  margin-top : 3px;
  background-color : #202020;
}
</style>
